<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../libs/mui/mui.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<style>		
			.mui-segmented-control {background-color: white;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #34b3f1;}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {background-color: #34b3f1;}
			/*图为详情*/
			.marg{margin-bottom: 5px;}
			.mui-table-view.mui-grid-view{padding: 0;}
			.mui-table-view.mui-grid-view .mui-table-view-cell {text-align: left;padding: 11px 10px;}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{height: 67px;}					
			/*合计*/
			.total{width: 100%;line-height: 30px;border-top: 1px solid #efeff4;}
			.total button{width: 80px;line-height: 15px;overflow: hidden;}
			.total span:nth-child(2){display: inline-block;float: right;}
			/*支付密码弹窗 start*/
			
			.password-of-pay-wraper {
			  display: none;
			  width: 80%;
			  height: 180px;
			  background-color: #fff;
			  position: fixed;
			  left: 10%;
			  top: 50%;
			  margin-top: -90px;
			  border-radius: 5px;
			  z-index: 1002;
			}
			
			#password_backdrop {
			  position: fixed;
			  z-index: 999;
			  top: 0;
			  right: 0;
			  bottom: 0;
			  left: 0;
			  -webkit-transition-duration: 400ms;
			  -moz-transition-duration: 400ms;
			  transition-duration: 400ms;
			  opacity: 1;
			  -webkit-opacity: 1;
			  -moz-opacity: 1;
			  -khtml-opacity: 1;
			  filter: alpha(opacity=100);
			  background: rgba(0, 0, 0, .4);
			  display: none;
			}
			
			.password-of-pay-top {
			  width: 100%;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  color: #757575;
			  border-bottom: 1px solid #e1e1e1;
			  position: relative;
			}
			
			.password-of-pay-top .close-btn {
			  width: 28px;
			  height: 28px;
			  line-height: 28px;
			  text-align: center;
			  position: absolute;
			  top: 4px;
			  left: 10px;
			  font-size: 16px;
			}
			
			.password-of-pay-body {
			  width: 100%;
			  padding-top: 40px;
			}
			
			.password-of-pay-body form {
			  width: 210px;
			  background-color: #f30;
			  margin: 0 auto;
			  position: relative;
			}
			
			.password-of-pay-body input[type="password"] {
			  float: left;
			  width: 35px;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  font-size: 24px;
			  padding: 0;
			  margin: 0;
			  border-radius: 0;
			}
			
			.password-of-pay-body form input[type="password"]+ input[type="password"] {
			  border-left: 0;
			}
			
			
			/*支付密码弹窗 end*/ 
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的订单</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">全部</a>
					<a class="mui-control-item" href="#item2mobile">待付款</a>
					<a class="mui-control-item" href="#item3mobile">配送中</a>
					<a class="mui-control-item" href="#item4mobile">待收货</a>
					<a class="mui-control-item" href="#item5mobile">待评价</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-text-center mui-active" style="width: 20%;"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">								
								<!--<ul class="mui-table-view mui-grid-view">
									<li class="mui-table-view-cell mui-col-xs-3">
										<img class="mui-media-object mui-pull-left" src="../public/img/5.jpg"/>
									</li>
									<li class="mui-table-view-cell mui-col-xs-9">
										<div class="mui-ellipsis-2">苹果（Apple）iPhone6  128G   4G 手机 原封 国行</div>										
										<div class="money">
											<span>￥2500.00</span>
											<span>x1</span>
										</div>
									</li>
									<li class="mui-table-view-cell total">										
										<span>合计：￥2500.00</span>
										<span><button type="button" class="mui-btn RGB" onclick="openNewPage('orders_evaluation.html')">评价</button></span>										
									</li>
								</ul>								
								<ul class="mui-table-view mui-grid-view marg" onclick="openNewPage('orders_completed.html')">
									<li class="mui-table-view-cell mui-col-xs-3">
										<img class="mui-media-object mui-pull-left" src="../public/img/15.jpg"/>
									</li>
									<li class="mui-table-view-cell mui-col-xs-9">
										<div class="mui-ellipsis-2">苹果（Apple）iPhone6  128G   4G 手机 原封 国行</div>										
										<div class="money">
											<span>￥2500.00</span>
											<span>x1</span>
										</div>
									</li>
									<li class="mui-table-view-cell total">										
										<span>合计：￥2500.00</span>
										<span class="gray">已完成</span>
									</li>
								</ul>-->
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
									
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll4" class="mui-scroll-wrapper">
							<div class="mui-scroll">
									
							</div>
						</div>
					</div>
					<div id="item5mobile" class="mui-slider-item mui-control-content">
						<div id="scroll5" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--/*支付密码弹窗 start*/-->
			<div class="password-of-pay-wraper" id="j_password_of_pay">
				<div class="password-of-pay-top">
					<p>请输入支付密码</p>
					<div class="close-btn" id="j_close_tn">X</div>
				</div>
				<div class="password-of-pay-body">
					<form action="#" class="mui-clearfix">
						<input type="password" id="pwd1" maxlength="1" />
						<input type="password" id="pwd2" maxlength="1" />
						<input type="password" id="pwd3" maxlength="1" />
						<input type="password" id="pwd4" maxlength="1" />
						<input type="password" id="pwd5" maxlength="1" />
						<input type="password" id="pwd6" maxlength="1" />
					</form>		
				</div>
			</div>
			<div id="password_backdrop"></div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/open.js"></script>
		<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
		<script type="text/javascript" src="../js/web_js/public.js"></script>
		<script type="text/javascript" src="../js/web_js/order.js"></script>
		<script src="../js/appconfig.js"></script>
		<script type="text/javascript" src="../js/web_js/order_pay.js"></script> 
		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
			//高度自适应	
			$(document).ready(function() {
				$(".mui-control-content").css({
					"color": "black",
					"min-height": (document.documentElement.clientHeight - 88) + "px"
				});
			})
			//点击支付密码弹窗的"关闭"按钮所处理业务
		$("#j_close_tn").on("tap",function (){
			$("#j_password_of_pay").hide();
			tool.shade().hide();
			$('.popover').fadeOut();
			$('#password_backdrop').css("display","none");
		});
		</script>
	</body>
</html>